Offline-First অ্যাপ্লিকেশন ডিজাইন একটি পদ্ধতি যেখানে অ্যাপ্লিকেশনটি সর্বপ্রথম অফলাইনে কার্যকরী হতে সক্ষম, এবং পরবর্তীতে ইন্টারনেট কানেকশন পাওয়া গেলে তা সিঙ্ক হয়ে যায়। PouchDB এর সাহায্যে Offline-First অ্যাপ্লিকেশন তৈরি করা সহজ, কারণ PouchDB ডেটাবেসটি ব্রাউজারের মধ্যে ডেটা সঞ্চয় করে এবং অফলাইনে কাজ করার পর ইন্টারনেট কানেকশনের সাথে সিঙ্ক হয়।
এই ডেমোতে আমরা একটি টাস্ক ম্যানেজমেন্ট অ্যাপ্লিকেশন তৈরি করব যেখানে ব্যবহারকারীরা টাস্ক অ্যাড করতে, দেখতে এবং সম্পাদনা করতে পারবে, এবং এই সমস্ত ডেটা ব্রাউজারে সংরক্ষিত হবে এবং ইন্টারনেট কানেকশনের মাধ্যমে সার্ভারে সিঙ্ক হবে।
ডেমো: Offline-First টাস্ক ম্যানেজমেন্ট অ্যাপ্লিকেশন
1. HTML কোড (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offline-First Task Manager</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pouchdb/7.0.0/pouchdb.min.js"></script>
</head>
<body>
<h1>Offline-First Task Manager</h1>
<div>
<h3>Add Task</h3>
<input type="text" id="taskInput" placeholder="Enter a task">
<button onclick="addTask()">Add Task</button>
</div>
<div>
<h3>Tasks</h3>
<ul id="taskList"></ul>
</div>
<script>
// PouchDB ডাটাবেস তৈরি
var localDb = new PouchDB('tasks_db');
// ডেটা অ্যাড করা
function addTask() {
var taskInput = document.getElementById('taskInput').value;
if (taskInput) {
var task = {
_id: new Date().toISOString(),
task: taskInput
};
localDb.put(task).then(function(response) {
console.log('Task added:', response);
loadTasks(); // টাস্ক লোড করা
document.getElementById('taskInput').value = ''; // ইনপুট ফিল্ড ক্লিয়ার করা
}).catch(function(err) {
console.log('Error adding task:', err);
});
}
}
// টাস্ক লোড করা
function loadTasks() {
localDb.allDocs({ include_docs: true, descending: true }).then(function(result) {
var taskList = document.getElementById('taskList');
taskList.innerHTML = ''; // পুরনো টাস্কগুলো মুছে ফেলা
result.rows.forEach(function(row) {
var li = document.createElement('li');
li.textContent = row.doc.task;
taskList.appendChild(li);
});
}).catch(function(err) {
console.log('Error loading tasks:', err);
});
}
// পেজ লোড হওয়ার সময় টাস্ক লোড করা
loadTasks();
// ক্লাউড ডেটাবেস সিঙ্ক করার জন্য (যদি থাকে)
var remoteDb = new PouchDB('https://your-cloud-db-url.com/tasks_db');
// পাউচডিবি সিঙ্ক সেটআপ করা
localDb.sync(remoteDb, {
live: true,
retry: true
}).on('change', function(info) {
console.log('Sync change detected:', info);
}).on('error', function(err) {
console.log('Sync error:', err);
});
</script>
</body>
</html>
কোডের ব্যাখ্যা
- PouchDB ডাটাবেস:
localDb = new PouchDB('tasks_db');এই কোড লাইনে একটি লোকাল পাউচডিবি ডাটাবেস তৈরি করা হচ্ছে যার নামtasks_db।- এই ডাটাবেসে টাস্কগুলি অফলাইনে সঞ্চিত হবে এবং ইন্টারনেট কানেকশন পাওয়ার পর তা সার্ভারের সাথে সিঙ্ক হবে।
- টাস্ক অ্যাড করা:
- ব্যবহারকারী যখন টাস্ক ইনপুট ফিল্ডে কিছু লিখে "Add Task" বোতামে ক্লিক করবে, তখন
addTask()ফাংশনটি চালু হবে। - ফাংশনটি একটি নতুন টাস্ক তৈরি করবে এবং সেটি পাউচডিবি ডাটাবেসে সংরক্ষণ করবে।
- ব্যবহারকারী যখন টাস্ক ইনপুট ফিল্ডে কিছু লিখে "Add Task" বোতামে ক্লিক করবে, তখন
- টাস্ক লোড করা:
loadTasks()ফাংশনটি পাউচডিবি ডাটাবেস থেকে সমস্ত টাস্ক নিয়ে আসে এবং সেগুলি UI তে প্রদর্শন করে।localDb.allDocs({ include_docs: true, descending: true })ব্যবহার করে সমস্ত ডকুমেন্ট লোড করা হয়।
- Syncing with Cloud:
localDb.sync(remoteDb, { live: true, retry: true });এই কোডটি ডেটাবেসের লোকাল কপি এবং রিমোট ক্লাউড ডাটাবেসের মধ্যে সিঙ্কিং নিশ্চিত করে।- যখন ব্রাউজার অফলাইন থাকে, তখন ডেটা লোকাল ডাটাবেসে সঞ্চিত হবে এবং যখন ইন্টারনেট কানেকশন ফিরে আসবে, তখন এটি ক্লাউড ডাটাবেসের সাথে সিঙ্ক হবে।
PouchDB এর Syncing ব্যবস্থার ব্যাখ্যা
PouchDB এর sync() ফাংশনটি দুইটি ডেটাবেসের মধ্যে ডেটা সিঙ্ক্রোনাইজেশন করে। এটি বিশেষত Offline-First অ্যাপ্লিকেশনগুলির জন্য গুরুত্বপূর্ণ, যেখানে ডেটা সার্ভারের সাথে সিঙ্ক না হয়ে পর্যন্ত ব্রাউজারের লোকাল স্টোরেজে সঞ্চিত থাকে।
- live: true: এই অপশনটি সিঙ্কিং প্রক্রিয়াটি লাইভ রাখে। এর মানে হল যে, যদি কোনো পরিবর্তন হয় (যেমন নতুন টাস্ক অ্যাড করা), সেগুলি স্বয়ংক্রিয়ভাবে সিঙ্ক হয়ে যাবে।
- retry: true: যদি সিঙ্ক্রোনাইজেশন ব্যর্থ হয়, তবে এটি পুনরায় চেষ্টা করবে।
সুবিধাসমূহ
- Offlne-First: ব্যবহারকারী ইন্টারনেট সংযোগের না থাকার পরেও টাস্ক যোগ এবং সম্পাদনা করতে পারে।
- Automatic Sync: যখন ইন্টারনেট কানেকশন ফিরে আসে, তখন ডেটা স্বয়ংক্রিয়ভাবে সিঙ্ক হয়ে যাবে।
- Real-Time Updates: টাস্কগুলির মধ্যে কোনো পরিবর্তন হলে তা লাইভ সিঙ্কিংয়ের মাধ্যমে ক্লাউডে আপডেট হবে।
- Simple Data Management: PouchDB ব্যবহার করে ডেটা পরিচালনা করা সহজ এবং ব্রাউজারের মধ্যে সঞ্চয় করা যায়।
সারাংশ
এটি একটি Offline-First Web Application যেখানে PouchDB ব্যবহার করে টাস্ক ম্যানেজমেন্ট অ্যাপ্লিকেশন তৈরি করা হয়েছে। এখানে ডেটা লোকাল ডাটাবেসে সঞ্চিত হয় এবং ইন্টারনেট কানেকশন ফিরে আসলে তা ক্লাউড ডাটাবেসের সাথে সিঙ্ক হয়। PouchDB-এর sync() ফাংশনটি এই সিঙ্ক্রোনাইজেশন নিশ্চিত করে, যা অফলাইন-অফলাইন মোডে ব্যবহারের জন্য খুবই কার্যকরী।
Read more
